<template>
    <div>
        <div class="jingao" v-if="datalist.length == 0">
            <!-- <span>您暂时还没有留下任何照片哦!</span> -->
            <el-result icon="info" title="信息提示" subTitle="您暂时还没有留下任何照片哦">
                <template slot="extra">
                    <el-button type="primary" size="medium">前往发布</el-button>
                </template>
            </el-result>
        </div>
        <!-- 数据容器 -->
        <div class="data-container">
            <!-- 数据列表  -->
            <div class="data-item" v-for="(item, index) in datalist" :key="index">
                <div class="left-container">

                    <div class="item-left" :style="`background-image: url(${item.photoUrl.split(',')[0]});`">
                        <div class="mask"></div>
                    </div>
                </div>
                <div class="item-right">
                    <div class="right-top">
                        <div class="userInfo">
                            <img :src="item.avatar" alt="">
                            <div>
                                <span class="nickname">{{item.nickname}}</span>
                                <span class="em">{{item.email}}</span>
                           </div>
                        </div>
                        <hr>
                    </div>
                    <div class="right-center">
                        <span class="title">【#{{item.categoryName}}】</span>
                        <span class="title photo-name"
                        @click="$router.push({
                            query:{
                                id:item.id
                            },
                            path:'/index/PhotoDetail'
                        })"
                        
                        >{{ item.summary }}</span>
     
                    </div>
                    <div class="right-bottom">
      
                        <div class="photoInfo">
                            <span>喜欢人数：({{item.likeSum}})</span>
                            <span>发布时间：{{item.publishDateTime}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {GETUSERPHOTOWALLDATA} from "@/api/user"
export default {
    name: 'SchoolForumZpqgl',

    data() {
        return {
            datalist:[],
            fysj:{
                current:1,
                size:6,
                total:0
            }
        };
    },

    mounted() {
        // 初始化数据
        this.init();
    },

    methods: {
        init(){
            this.getUserPhotoWallData()    
        },
        // 获取个人专属照片数据
        getUserPhotoWallData(){
            GETUSERPHOTOWALLDATA(this.fysj.current,this.fysj.size).then(res=>{
                this.datalist = res.list
                this.fysj.total = res.total
                console.log(res);
            })
        },
    },
};
</script>

<style lang="scss" scoped>
.jingao{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    span{
        color:gray;
        font-size: 20px;
        font-weight: bold;
    }

}
// 数据容器样式
.data-container{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    .data-item{
        border-radius: 5px;
        padding: 20px;
        display: flex;
        // align-items: center;
        // justify-content: space-between;
        width: 46%;
        height: 150px;
        background-color: rgba(255, 255, 255, 0.6);
        .left-container{
            height: 100%;
            display: flex;
            align-items: center;
        }

        .item-left{
            width: 200px;
            height: 100%;
            border-radius: 10px;
            overflow: hidden;
            background-size: cover;
            background-position: center;
        }
        .item-right{
            margin-left: 10px;
            width: 100%;
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            padding: 10px;
            .right-top{
                hr{
                    display: block;
                    margin: 10px 0px 10px 0px;
                }

                .userInfo{
                    display: flex;
                    flex-flow: row;
                    align-items: center;

                    img{
                        width: 40px;
                        height: 40px;
                        border-radius: 100%;
                    }
                    span{
                        display: block;
                        margin-left: 10px;
                        font-weight: bold;
                        font-size: 16px;
                    }
                    .em{
                        font-weight: normal;
                        font-size: 12px;
                        color: gray;
                    }
                }
            }
            .right-center{
                .title{
                    font-size: 16px;
                    color:rgb(130, 127, 127);
                    cursor: pointer;
                }

            }
            .title:nth-child(1):hover{
                    color: rgba(77, 77, 226, 0.758) !important;
            }
            .right-bottom{
                
                .photoInfo{
                    display: flex;
                    justify-content: space-between;
                    font-size: 12px;
                    color: gray;
                }
                
            }    
        }

    }
}


.photo-name:hover{
    color: rgba(211, 24, 24, 0.556);
    text-decoration: underline;
}
// 图层蒙版
.mask{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  background: -webkit-linear-gradient(bottom, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 44%, rgba(51, 51, 51, 0) 99%);
}
</style>